<template>
  <div class="banner">
    <img :src="image1" class="banner-image" />
    <button type="success" class="banner-button" @click="switchChild">
      <span class="banner-button__text">
        {{ (userInfo && userInfo.curChild && userInfo.curChild.name) || '' }}
      </span>
      <!-- <icon type="download" class="banner-button__arrow" name="arrow-down" /> -->
    </button>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import imageone from '@static/banner.png';
  export default {
    data() {
      return {
        banner: true,
        image1: imageone,
        images: [imageone],
        title: '关于防疫期间学校采取的保护广大老师和学生措施'
      };
    },
    inject: ['onSwitchChild'],
    computed: {
      ...mapGetters('user', ['userInfo'])
    },
    methods: {
      onChange(index) {},
      switchChild() {
        this.onSwitchChild();
      }
    }
  };
</script>
<style lang="less" scoped>
  .banner {
    // padding-right: 10px;
    width: 100vw !important;
    padding: 0 !important;

    &-image {
      width: calc(100vw - 30px);
      height: 100%;
      padding: 0 15px;
    }

    &-button {
      position: absolute;
      top: 20px;
      left: 26px;
      min-width: 57px;
      height: 23px;
	  line-height: 23px;
      background: #3398ed;
      border-radius: 11px;
      opacity: 0.88;

      &__text,
      &__arrow {
        vertical-align: middle;
      }
    }
  }
</style>
